<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">报警管理</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请输入所属用户</label
                        >
                        <input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="请输入所属用户"
                            pTooltip="请输入所属用户"
                            [(ngModel)]="searchName"
                        />
                    </div>
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请选择报警状态</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="请选择报警状态"
                            pTooltip="请选择报警状态"
                        /-->
                        <p-dropdown
                            [options]="state"
                            [(ngModel)]="searchState"
                            optionLabel="label"
                            optionValue="value"
                            placeholder="选择报警状态"
                        ></p-dropdown>
                    </div>
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请选择时间</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="请选择时间"
                            pTooltip="请选择时间"
                        /-->
                        <p-calendar [(ngModel)]="selectTime" [numberOfMonths]="2" [showTime]="true" [showSeconds]="true" selectionMode="range" [readonlyInput]="true" inputId="range" class="calendar"></p-calendar>
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button label="查询" icon="pi pi-search" (click)="search()"></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                            (click)="reset()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="导出"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height:625px">
            <p-table
                #dt1
                [value]="data"
                dataKey="alarm"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                styleClass="p-datatable-striped"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="10%" pFrozenColumn>
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                报警编号
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                机井名称
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属用户
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                报警类型名称
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所在位置
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                状态
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                报警时间
                            </div>
                        </th>
                        <th width="20%" pFrozenColumn alignFrozen="right">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                操作
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="10%" pFrozenColumn>
                            {{ item.warnId }}
                        </td>
                        <td width="15%">
                            {{ item.wellName }}
                        </td>
                        <td width="10%">
                            {{ item.applicantName }}
                        </td>
                        <td width="15%">
                            {{ type[item.warnType] }}
                        </td>
                        <td width="10%">
                            {{ item.address }}
                        </td>
                        <td width="10%">
                            {{ transForm(item.status) }}
                        </td>
                        <td width="10%">
                            {{ item.warnTime }}
                        </td>
                        <td
                            width="20%"
                            style="text-align: center"
                            pFrozenColumn
                            alignFrozen="right"
                        >
                            <button
                                *ngIf="item.status === 0"
                                pButton
                                pRipple
                                type="button"
                                label="确认已处理"
                                (click)="handleStatus(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                *ngIf="item.status === 1"
                                type="button"
                                label="取消已处理"
                                class="p-button-secondary"
                                (click)="handleStatus(item)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到配额信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载配额信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
